import React, {lazy} from 'react';
import IScroll from '../../../assets/js/utils/iscroll';
import {connect} from 'react-redux';
import action from '../../../store/action';
import {goBack, GoPagePush, lazyImg, LocalParam} from "../../../assets/js/utils";
import  request from '../../../assets/js/utils/request';
import UpRefresh from '../../../assets/js/libs/uprefresh';

import Css from '../../../assets/css/home/goods/index.css';
const SearcgComponemt=lazy(()=>import('../../../components/search/search'))
class goodsSeach extends React.Component{
    constructor(){
        super();
        this.state={
            bPageStyle:false,
            bMask:false,
            bPriceMenu:false,
            bSalesMenu:false,
            aGoodsSeach:[],
            oType:[
                {title:'综合',otype:'all',checked:true},
                {title:'从低到高',otype:'up',checked:false},
                {title:'从高到底',otype:'down',checked:false},
            ],
            goodsSeachkeyWords:'',
            goodsSeachClass:{
                bActive:false,
                data:[]
            },
            goodsSeachPrice:{
                checked:false,
                data:[
                    {minPrice:1,maxPrice:50,checked:false},
                    {minPrice:51,maxPrice:99,checked:false},
                    {minPrice:100,maxPrice:300,checked:false},
                    {minPrice:301,maxPrice:1000,checked:false},
                    {minPrice:1001,maxPrice:4000,checked:false},
                    {minPrice:4001,maxPrice:9999,checked:false},
                ]
            },
            minPrice:0,
            maxPrice:0,
            goodsSeachAttr:[],
            total:0

        }
        this.myScroll=null;
        this.oUpRefresh=null;
        this.curPage=1;
        this.maxPage=0;
        this.offsetBottom=100;
        this.sParams='';
        this.oTpye='all';
        this.goodsSeachkeyWords='';
        this.cid='';
        this.minPrice='';
        this.maxPrice='';
        this.sParam='';
        this.aParam=[]
    }

    componentDidMount(){
        this.goodsSeachkeyWords=decodeURI(LocalParam(this.props.location.search).search.keywords);
        this.setState({goodsSeachkeyWords:this.goodsSeachkeyWords});
        this.getGoodsSeachData();
        this.getgoodsSeachClass();
        this.getGoodsSeachAttr()
    }

    // 获取列表数据
    getGoodsSeachData(){
        this.setParams()
        request(window.base.config.baseUrl+'/home/goods/search?'+this.sParams+'&page=1&token='+window.base.config.token,'get').then((res)=>{
           if(res.code===200){
               let temAGoodsSeach=this.state.aGoodsSeach,temTatol=this.state.total;
               temAGoodsSeach=res.data;
               temTatol=res.pageinfo.total;
               this.setState({aGoodsSeach:temAGoodsSeach,total:temTatol});
               lazyImg();
               this.maxPage=res.pageinfo.pagenum;
               this.getScrollPage();
           }else {
               let temAGoodsSeach=this.state.aGoodsSeach,temTatol=this.state.total;
               temAGoodsSeach=[];
               temTatol=0;
               this.setState({aGoodsSeach:temAGoodsSeach,total:temTatol});
           }
        })
    }
    //获取分页数据
    getScrollPage(){
        this.oUpRefresh=new UpRefresh({"curPage":this.curPage,"maxPage":this.maxPage,"offsetBottom":this.offsetBottom},curPage=>{
            request(window.base.config.baseUrl+'/home/goods/search?'+this.sParams+'&page='+curPage+'&token='+window.base.config.token,'get').then((res)=>{
               if(res.code===200){
                   let temAGoodsSeach=this.state.aGoodsSeach;
                   if (res.data.length>0){
                       for (let i in res.data){
                           temAGoodsSeach.push(res.data[i]);
                       }
                   }
                   this.setState({aGoodsSeach:temAGoodsSeach});
               }
            })
        });
    }
    //全局参数修改
    setParams(){
        this.sParams='kwords='+this.goodsSeachkeyWords+'&param='+this.sParam+'&price1='+this.minPrice+'&price2='+this.maxPrice+'&otype='+this.oTpye+'&cid='+this.cid+''
    }
    // 组件传值
    getChildrenKeyWords(val){
        this.goodsSeachkeyWords=val;
        this.setState({bPageStyle:false,goodsSeachkeyWords:val});
        this.props.history.replace(window.base.config.path+'goods/seach?keywords='+val);
        this.Reset();
        this.getGoodsSeachData();
        this.getGoodsSeachAttr();
    }
    //点击排序
    checkedOType(index){
        let temOTpye=this.state.oType;
        for(let key in temOTpye){
            temOTpye[key].checked=false;
            temOTpye[index].checked=true;
        }
        this.setState({oTpye:temOTpye});
        this.oTpye=temOTpye[index].otype;
        this.setState({bPriceMenu:false})
        this.getGoodsSeachData()
    }
    //滚动
    eventIscroll(){
        document.getElementById("iscrollGoodsSeach").addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, false);
        this.myScroll = new IScroll('#iscrollGoodsSeach', {
            scrollX: false,
            scrollY: true,
            preventDefault: false
        });
    }
    //点击展开筛选面板
    changeMask(){
        this.eventIscroll()
        this.setState({bMask:true});
        this.handstrTouch();
    }
    //点击关闭筛选面板
    UnChangeMask(){
        this.setState({bMask:false});
    }
    //删除监听默认touch事件
    handstrTouch(){
        this.refs['goodsSeachMask'].addEventListener('touchmove',function (e) {
            e.preventDefault()
        },false)
        this.refs['goodsSeachScreen'].addEventListener('touchmove',function (e) {
            e.preventDefault()
        },false)
    }
    //阻止内存泄漏
    componentWillUnmount(){
        this.refs['goodsSeachMask'].removeEventListener('touchmove',function (e) {
            e.preventDefault()
        })
        this.refs['goodsSeachScreen'].removeEventListener('touchmove',function (e) {
            e.preventDefault()
        })
    }
    //显示seach组件
    changePageStyle(){
        this.setState({bPageStyle:true})

    }
    //隐藏seach组件
    getPageStyle(val){
        this.setState({bPageStyle:val})
    }
    //返回
    goBack(){
        goBack(this.props)
    }
    //点击显示隐藏下拉
    changePriceMenu(){
        let temBPriceMenu=this.state.bPriceMenu;
        if(temBPriceMenu){
            this.setState({bPriceMenu:false})
            this.setState({bSalesMenu:false})
        }else {
            this.setState({bPriceMenu:true})
            this.setState({bSalesMenu:false})
        }
   }
    //点击销量显示隐藏下拉
    changeSalesMenu(){
        let temBSalesMenu=this.state.bSalesMenu;
        if(temBSalesMenu){
            this.setState({bSalesMenu:false})
            this.setState({bPriceMenu:false})
        }else {
            this.setState({bSalesMenu:true})
            this.setState({bPriceMenu:false})
        }
        this.oTpye='sales';
        this.getGoodsSeachData();
        let temOTpye=this.state.oType;
        for(let key in temOTpye){
            temOTpye[key].checked=false;
        }
        this.setState({oTpye:temOTpye});

    }
    //点击分类显示隐藏
    classShow(){
       let temGoodsSeachClass=this.state.goodsSeachClass;
        if(temGoodsSeachClass.bActive){
            temGoodsSeachClass.bActive=false
        }else {
            temGoodsSeachClass.bActive=true

        }
        this.setState({goodsSeachClass:temGoodsSeachClass},()=>{
            this.eventIscroll()
        })
    }
    //点击分类item选中
    classItem(index){
        let temGoodsSeachClass=this.state.goodsSeachClass;

        if(temGoodsSeachClass.data.length>0){
            if(!temGoodsSeachClass.data[index].bActive){
                for (let key in temGoodsSeachClass.data){
                    temGoodsSeachClass.data[key].bActive=false;
                }
                temGoodsSeachClass.data[index].bActive=true;
                this.cid=temGoodsSeachClass.data[index].cid
            }else {
                temGoodsSeachClass.data[index].bActive=false;
                this.cid=''
            }
        }
        this.setState({goodsSeachClass:temGoodsSeachClass})
    }
    //点击价格区间显示隐藏
    PriceShow(){
        let temGoodsSeachPrice=this.state.goodsSeachPrice;
        if(temGoodsSeachPrice.checked){
            temGoodsSeachPrice.checked=false
        }else {
            temGoodsSeachPrice.checked=true
        }
        this.setState({goodsSeachPrice:temGoodsSeachPrice});
    }
    //阻止冒泡事件
    preventBubble(e){
        e.stopPropagation()
    }
    //点击选中取消价格区间
    priceItem(index,minPrice,maxPrice){
        let temGoodsSeachPrice=this.state.goodsSeachPrice;
        if(!temGoodsSeachPrice.data[index].checked){
            for (let key in temGoodsSeachPrice.data){
                temGoodsSeachPrice.data[key].checked=false;
            }
            temGoodsSeachPrice.data[index].checked=true;
            this.minPrice=minPrice;
            this.maxPrice=maxPrice
        }else {
            temGoodsSeachPrice.data[index].checked=false;
            minPrice=0;
            maxPrice=0;
            this.minPrice='';
            this.maxPrice=''
        }

        this.setState({goodsSeachPrice:temGoodsSeachPrice,minPrice:minPrice,maxPrice:maxPrice})
    }
    //最小价格双向绑定
    changeMinPrice(e){
        let temMinPrice=this.state.minPrice;
        temMinPrice=e.target.value.replace(/[a-zA-Z]|[\u4e00-\u9fa5]|[#|*|,|+|;]/g,'');
        this.setState({minPrice:temMinPrice});
        this.minPrice=temMinPrice;
    }
    //最大价格双向绑定
    changeMaxPrice(e){
        let temMaxPrice=this.state.maxPrice;
        temMaxPrice=e.target.value.replace(/[a-zA-Z]|[\u4e00-\u9fa5]|[#|*|,|+|;]/g,'');
        this.setState({maxPrice:temMaxPrice});
        this.maxPrice=temMaxPrice
    }
    //点击属性显示隐藏
    attrShow(index){
        let temGoodsSeachAttr=this.state.goodsSeachAttr;
        if(!temGoodsSeachAttr[index].checked){
            temGoodsSeachAttr[index].checked=true;
        }else {
            temGoodsSeachAttr[index].checked=false;
        }
        this.setState({goodsSeachAttr:temGoodsSeachAttr},()=>{
            this.eventIscroll()
        });
    }
    //点击选中取消属性
    attrItem(index,index1){
        let temGoodsSeachAttr=this.state.goodsSeachAttr;
        if(!temGoodsSeachAttr[index].param[index1].checked){
            temGoodsSeachAttr[index].param[index1].checked=true;
            this.aParam.push(temGoodsSeachAttr[index].param[index1].pid)
        }else {
            temGoodsSeachAttr[index].param[index1].checked=false
            for (let i in this.aParam) {
                if(this.aParam[i]===temGoodsSeachAttr[index].param[index1].pid){
                    this.aParam.splice(i--,1)
                }
            }
        }
        this.sParam=JSON.stringify(this.aParam)
        this.setState({goodsSeachAttr:temGoodsSeachAttr})
    }
    //获取分类数据
    getgoodsSeachClass(){
        this.props.dispatch(action.actClassify.actClassify({
            success:()=>{
                let temGoodsSeachClass=this.state.goodsSeachClass;
                temGoodsSeachClass.data=this.props.state.redClassify.aClassify;
                this.setState({goodsSeachClass:temGoodsSeachClass})

            }
        }))

    }
    //获取属性数据
    getGoodsSeachAttr(){
        this.props.dispatch(action.actGoodsSeachAttr.actGoodsSeachAttr({
            goodsSeachkeyWords:this.goodsSeachkeyWords,
            success:(res)=>{
                let temGoodsSeachAttr=this.state.goodsSeachAttr
                if(res.code===200){
                    temGoodsSeachAttr=this.props.state.redGoodsSeachAttr.goodsSeachAttr.data;
                }else {
                    temGoodsSeachAttr=[];
                }
                this.setState({goodsSeachAttr:temGoodsSeachAttr})
            }
        })
    )
    }
    //全部重置
    Reset(){
        this.cid='';
        this.minPrice='';
        this.maxPrice='';
        this.aParam=[];
        this.sParam='';
        //分类重置
        let temGoodsSeachClass=this.state.goodsSeachClass;
        if(temGoodsSeachClass.data.length>0){
            for (let i in temGoodsSeachClass.data){
                temGoodsSeachClass.data[i].bActive=false;
            }
        }
        //价格重置
        let temGoodsSeachPrice=this.state.goodsSeachPrice;
        for (let i in temGoodsSeachPrice.data){
            temGoodsSeachPrice.data[i].checked=false;
        }
        //属性重置
        let temGoodsSeachAttr=this.state.goodsSeachAttr;
        if(temGoodsSeachAttr.length>0){
            for (let i in temGoodsSeachAttr) {
                if(temGoodsSeachAttr[i].param.length>0){
                    for (let j in temGoodsSeachAttr[i].param){
                        temGoodsSeachAttr[i].param[j].checked=false
                    }
                }
            }
        }
        this.setState({goodsSeachClass:temGoodsSeachClass,goodsSeachPrice:temGoodsSeachPrice,goodsSeachAttr:temGoodsSeachAttr})
        this.getGoodsSeachData();
        this.UnChangeMask()
    }
    //确定
    sure(){
        this.getGoodsSeachData()
        this.UnChangeMask()
    }
    //进入历史记录页面
    goPage(purl){
        GoPagePush(this.props,purl)
    }
    render(){
        return(
            <div>
                <div className={Css['goodsSeachTop']}>
                    <div className={Css['goodsSeachNav']}>
                        <div className={Css['goodsGobackIcn']} onClick={this.goBack.bind(this)}><i className={'goBackIcn fs50'} /> </div>
                        <div className={Css['goodsSeachInput']+' fs28'} onClick={this.changePageStyle.bind(this)}><i className={' seach fs50 mr10'} />{this.state.goodsSeachkeyWords}</div>
                        <div className={Css['goodsSeachSclic']+' fs28'} onClick={this.changeMask.bind(this)}>筛选</div>
                    </div>
                    <div className={Css['goodsSeachCondition']}>
                        <ul>
                            <li className={this.state.bPriceMenu?Css['active']:''} onClick={this.changePriceMenu.bind(this)}>综合<i className={'downIcn fs30'} /></li>
                            <li className={this.state.bSalesMenu?Css['active']:''} onClick={this.changeSalesMenu.bind(this)}>销量</li>
                        </ul>
                    </div>
                    <div className={this.state.bPriceMenu?Css['goodsSeachConditionDown']+' '+Css['active']:Css['goodsSeachConditionDown']}>
                        <ul>
                            {
                                this.state.oType.length>0?this.state.oType.map((item,index)=>{
                                    return(
                                        <li key={index} onClick={this.checkedOType.bind(this,index)} className={item.checked?Css['active']:''}>{item.title}</li>
                                    )
                                }):''
                            }
                        </ul>
                    </div>
                </div>
                <div className={Css['goodsSeachMain']}>
                    <ul>
                        {
                            this.state.aGoodsSeach.length>0?this.state.aGoodsSeach.map((item,index)=>{
                                return(
                                    <li key={index} onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item.gid)}>
                                        <div className={Css['goodsSeachMainImg']}>
                                            <img src={require('../../../assets/images/commen/lazyImg.jpg')} data-echo={item.image} alt={item.title} />
                                        </div>
                                        <div className={Css['goodsSeachMainFont']}>
                                            <div className={Css['goodsSeachMainTitle']}>{item.title}</div>
                                            <div className={Css['goodsSeachMainPrice']}>￥{item.price}</div>
                                            <div className={Css['goodsSeachMainSalse']}>销量<span>{item.sales}</span>件</div>
                                        </div>
                                    </li>
                                )
                            }):'没有相关产品'
                        }
                    </ul>
                </div>
                <div className={this.state.bMask?Css['goodsSeachMask']+' '+Css['active']:Css['goodsSeachMask']} ref={'goodsSeachMask'} onClick={this.UnChangeMask.bind(this)}></div>
                <div id='iscrollGoodsSeach' className={this.state.bMask?Css['goodsSeachScreen']+' '+Css['active']:Css['goodsSeachScreen']} ref='goodsSeachScreen'>
                        <div className={Css['iscrollGoodsSeach']}>
                            <div className={this.state.goodsSeachClass.bActive?Css['goodsSeachAttr']+' '+Css['active']:Css['goodsSeachAttr']}>
                                <div className={Css['goodsSeachAttrTitle']} onClick={this.classShow.bind(this)}>
                                    <p>分类</p>
                                    <i className={'downIcn fs50'} />
                                </div>
                                <ul >
                                    {
                                        this.state.goodsSeachClass.data.length>0?
                                            this.state.goodsSeachClass.data.map((item,index)=>{
                                                return(
                                                    <li key={index} className={item.bActive?Css['active']:''} onClick={this.classItem.bind(this,index)} >{item.title}</li>
                                                )
                                            })
                                        :''
                                    }
                                </ul>
                            </div>
                            <div className={this.state.goodsSeachPrice.checked?Css['goodsSeachAttr']+' '+Css['active']:Css['goodsSeachAttr']}>
                                <div className={Css['goodsSeachAttrTitle']} onClick={this.PriceShow.bind(this)}>
                                    <p>价格区间</p>
                                    <div className={Css['goodsSeachAttrPrice']} onClick={this.preventBubble.bind(this)}>
                                        <div className={Css['goodsSeachAttrMinPrice']}><input placeholder='最低价' onChange={this.changeMinPrice.bind(this)} value={this.state.minPrice===0?'':this.state.minPrice}/></div>
                                        <div className={Css['line']+' line'}></div>
                                        <div className={Css['goodsSeachAttrMaxPrice']}><input placeholder='最高价' onChange={this.changeMaxPrice.bind(this)} value={this.state.maxPrice===0?'':this.state.maxPrice}/></div>
                                    </div>
                                    <i className={Css['active']+' downIcn fs50'} />
                                </div>
                                <ul>
                                    {
                                        this.state.goodsSeachPrice.data.length>0?this.state.goodsSeachPrice.data.map((item,index)=>{
                                                return(
                                                    <li key={index} className={item.checked?Css['active']:''} onClick={this.priceItem.bind(this,index,item.minPrice,item.maxPrice)}>{item.minPrice}-{item.maxPrice}</li>
                                                )
                                            })
                                        :''
                                    }

                                </ul>
                            </div>
                            {
                                this.state.goodsSeachAttr.length>0?
                                    this.state.goodsSeachAttr.map((item,index)=>{
                                        return(
                                            <div key={index} className={this.state.goodsSeachAttr[index].checked?Css['goodsSeachAttr']+' '+Css['active']:Css['goodsSeachAttr']}>
                                                <div className={Css['goodsSeachAttrTitle']} onClick={this.attrShow.bind(this,index)}>
                                                    <p>{item.title}</p>
                                                    <i className={Css['active']+' downIcn fs50'} />
                                                </div>
                                                <ul>
                                                    {
                                                        item.param.length>0?
                                                            item.param.map((item1,index1)=>{
                                                                return(
                                                                    <li key={index1} className={item1.checked?Css['active']:''} onClick={this.attrItem.bind(this,index,index1)} >{item1.title}</li>
                                                                )
                                                            })
                                                        :' '
                                                    }
                                                </ul>
                                            </div>
                                        )
                                    })
                                    :' '
                            }
                        </div>
                    <div className={Css['goodsSeachBot']}>
                        <div className={Css['goodsSeachBotItem']}>共<span>{this.state.total}</span>件</div>
                        <div className={Css['goodsSeachBotItem']+' '+Css['rest']} onClick={this.Reset.bind(this)}>全部重置</div>
                        <div className={Css['goodsSeachBotItem']+' '+Css['sure']} onClick={this.sure.bind(this)}>确定</div>
                    </div>
                </div>
                <SearcgComponemt pageStyle={this.state.bPageStyle?"block":"none"} getPageStyle={this.getPageStyle.bind(this)} isLocal='1' childrenKeyWords={this.getChildrenKeyWords.bind(this)} senKeyWords={this.state.goodsSeachkeyWords}></SearcgComponemt>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state
    }
})(goodsSeach)